<template>
    <p style="line-height: 3.125rem; font-size: 1rem; font-weight: bold" class="main_text">
        原材料库存
    </p>
    <div class="main">
        <!-- ############################################## 查询 ############################################## -->
        <div class="top mb20 p20">
            <el-form :model="searchData">
                <div class="df">
                    <el-form-item label="材料名称：" class="mr20">
                        <el-select v-model="searchData.rawMaterialName" placeholder="材料名称：">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="材料编号：" class="mr20">
                        <el-select v-model="searchData.rawMaterialId" placeholder="材料编号：">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="仓库名称：" class="mr20">
                        <el-select v-model="searchData.rawMaterialId" placeholder="仓库名称：">
                            <el-option v-for="item in WarehouseList" :key="item.warehouseId" :label="item.warehouseName"
                                :value="item.warehouseName" />
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="仓库编号：">
                        <el-select v-model="searchData.storeId" placeholder="仓库编号：">
                            <el-option
                                v-for="item in WarehouseList"
                                :key="item.warehouseId"
                                :label="item.warehouseName"
                                :value="item.warehouseId"
                            />
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="primary" plain>重置</el-button>
        </div>
        <!-- ############################################## 表单 ############################################## -->
        <div class="content p20">
            <div>
                <el-button type="primary" @click="InDialogVisible = true">入库</el-button>
                <el-button type="primary" plain @click="StartcenterDialogVisible = true"
                    >出库</el-button
                >
                <el-button type="primary" plain @click="DiaoBoDialogVisible = true">调拨</el-button>
                <!-- <el-button plain>导入原材料</el-button>
                <el-button plain>导出原材料</el-button> -->
            </div>
            <el-table
                @selection-change="handleSelectionChange"
                :data="tableData"
                style="width: 100%"
                class="mt20"
                :header-cell-style="{ background: '#f0f6fe' }"
                max-height="463"
            >
                <el-table-column type="selection" width="50" />
                <el-table-column prop="id" label="材料编号" :show-overflow-tooltip="true" />
                <el-table-column prop="type_name" label="材料名称" :show-overflow-tooltip="true" />
                <!-- <el-table-column prop="rawMaterialDescription" label="材料描述" :show-overflow-tooltip="true" /> -->
                <el-table-column prop="price" label="定价" :show-overflow-tooltip="true" />
                <el-table-column
                    prop="type_id"
                    label="原材料类型id"
                    :show-overflow-tooltip="true"
                />
                <el-table-column prop="materialNum" label="库存" :show-overflow-tooltip="true" />
                <el-table-column
                    prop="warehouseName"
                    label="仓库名称"
                    :show-overflow-tooltip="true"
                />
                <el-table-column prop="createdAt" label="创建时间" :show-overflow-tooltip="true" />
                <el-table-column prop="updatedAt" label="更新时间" :show-overflow-tooltip="true" />
                <el-table-column fixed="right" label="操作" width="130">
                    <template #default="props">
                        <el-button size="small" link type="primary" @click="details(props.row)"
                            >详情</el-button
                        >
                        <!-- <el-button size="small" link type="primary">下载二维码</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
          <smartPager
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="Number(total)"
            @change="handleCurrentChange" />
        </div>
        <!-- ############################################## 蒙层 ############################################## -->
        <!-- ****************************** 编辑原材料-----详情 ****************************** -->
        <el-drawer v-model="drawer" size="50%" style="background: #f5f9ff">
            <div class="drawer_top p20">
                <h1 style="font-weight: 700; font-size: 1.125rem; color: #3d3d3d">原材料名称</h1>
                <span style="color: #9e9e9e; font-size: 0.75rem">原材料编号：0231345</span>
                <el-divider style="margin: 0.625rem 0" />
                <el-form
                    :model="editformData"
                    label-width="10rem"
                    label-position="left"
                    class="df fww"
                >
                    <el-form-item style="width: 50%">
                        <template #label>
                            <div class="df aic">
                                <el-icon color="#9e9e9e" class="mr6">
                                    <User />
                                </el-icon>
                                <p style="color: #9e9e9e">配件编号：</p>
                            </div>
                        </template>
                        <el-text>{{ editformData.rawMaterialId }}</el-text>
                        <!-- <el-input v-model="editformData.name" /> -->
                    </el-form-item>
                    <el-form-item style="width: 50%">
                        <template #label>
                            <div class="df aic">
                                <el-icon color="#9e9e9e" class="mr6">
                                    <User />
                                </el-icon>
                                <p style="color: #9e9e9e">配件名称：</p>
                            </div>
                        </template>
                        <el-text>{{ editformData.rawMaterialName }}</el-text>
                        <!-- <el-input v-model="editformData.name" /> -->
                    </el-form-item>
                    <el-form-item style="width: 50%">
                        <template #label>
                            <div class="df aic">
                                <el-icon color="#9e9e9e" class="mr6">
                                    <User />
                                </el-icon>
                                <p style="color: #9e9e9e">仓库名称：</p>
                            </div>
                        </template>
                        <el-text>某某仓库</el-text>
                        <!-- <el-input v-model="editformData.name" /> -->
                    </el-form-item>
                    <el-form-item style="width: 50%">
                        <template #label>
                            <div class="df aic">
                                <el-icon color="#9e9e9e" class="mr6">
                                    <User />
                                </el-icon>
                                <p style="color: #9e9e9e">仓库编码：</p>
                            </div>
                        </template>
                        <el-text>AI</el-text>
                        <!-- <el-input v-model="editformData.name" /> -->
                    </el-form-item>
                    <el-form-item style="width: 50%">
                        <template #label>
                            <div class="df aic">
                                <el-icon color="#9e9e9e" class="mr6">
                                    <User />
                                </el-icon>
                                <p style="color: #9e9e9e">定价：</p>
                            </div>
                        </template>
                        <el-text>￥{{ editformData.price }}</el-text>
                        <!-- <el-input v-model="editformData.name" /> -->
                    </el-form-item>
                    <el-form-item style="width: 50%">
                        <template #label>
                            <div class="df aic">
                                <el-icon color="#9e9e9e" class="mr6">
                                    <User />
                                </el-icon>
                                <p style="color: #9e9e9e">单位：</p>
                            </div>
                        </template>
                        <el-text>千克</el-text>
                        <!-- <el-input v-model="editformData.name" /> -->
                    </el-form-item>
                    <el-form-item style="width: 50%">
                        <template #label>
                            <div class="df aic">
                                <el-icon color="#9e9e9e" class="mr6">
                                    <User />
                                </el-icon>
                                <p style="color: #9e9e9e">仓储位置：</p>
                            </div>
                        </template>
                        <el-text v-if="flag == true">{{ editformData.storageLocation }}</el-text>
                        <el-input v-else v-model="editformData.storageLocation" />
                    </el-form-item>
                    <el-form-item style="width: 50%">
                        <template #label>
                            <div class="df aic">
                                <el-icon color="#9e9e9e" class="mr6">
                                    <User />
                                </el-icon>
                                <p style="color: #9e9e9e">库存数量：</p>
                            </div>
                        </template>
                        <el-text type="primary">1000</el-text>
                        <!-- <el-input v-model="editformData.name" /> -->
                    </el-form-item>
                    <el-form-item style="width: 50%">
                        <template #label>
                            <div class="df aic">
                                <el-icon color="#9e9e9e" class="mr6">
                                    <User />
                                </el-icon>
                                <p style="color: #9e9e9e">低储：</p>
                            </div>
                        </template>
                        <el-input-number
                            v-model="num"
                            :step="2"
                            step-strictly
                            style="width: 60%"
                            :disabled="flag"
                        />
                    </el-form-item>
                    <el-form-item style="width: 50%">
                        <template #label>
                            <div class="df aic">
                                <el-icon color="#9e9e9e" class="mr6">
                                    <User />
                                </el-icon>
                                <p style="color: #9e9e9e">高储：</p>
                            </div>
                        </template>
                        <el-input-number
                            v-model="num"
                            :step="2"
                            step-strictly
                            style="width: 60%"
                            :disabled="flag"
                        />
                    </el-form-item>
                    <el-form-item style="width: 50%">
                        <template #label>
                            <div class="df aic">
                                <el-icon color="#9e9e9e" class="mr6">
                                    <User />
                                </el-icon>
                                <p style="color: #9e9e9e">配件描述：</p>
                            </div>
                        </template>
                        <p style="width: 90%; line-height: 1.5rem">
                            十大啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊阿三顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶阿德杀杀杀杀杀杀杀杀杀
                        </p>
                    </el-form-item>
                    <el-form-item style="width: 50%">
                        <template #label>
                            <div class="df aic">
                                <el-icon color="#9e9e9e" class="mr6">
                                    <User />
                                </el-icon>
                                <p style="color: #9e9e9e">状态二维码：</p>
                            </div>
                        </template>
                        <div class="df aie">
                            <img
                                style="width: 5rem; height: 5rem"
                                src="../../../../assets/images/ewm.jpg"
                                alt=""
                            />
                            <!-- <p class="downLoad" size="small" type="primary">下载二维码</p> -->
                        </div>
                    </el-form-item>
                </el-form>
                <div class="df jcc">
                    <div>
                        <el-button type="primary" size="small" @click="editDetails">修改</el-button>
                        <el-button type="primary" size="small" plain @click="saveDetails"
                            >保存</el-button
                        >
                    </div>
                </div>
            </div>
            <div class="drawer_top p20 mt20">
                <div class="df jcsb">
                    <div class="mr10">
                        <el-select v-model="select" placeholder="明细类型" style="width: 7.1875rem">
                            <el-option label="Restaurant" value="1" />
                            <el-option label="Order No." value="2" />
                            <el-option label="Tel" value="3" />
                        </el-select>
                    </div>
                    <div style="width: 50%" class="df aic b0 mr10">
                        <el-select v-model="select" placeholder="明细类型" style="width: 30%">
                            <el-option label="Restaurant" value="1" />
                            <el-option label="Order No." value="2" />
                            <el-option label="Tel" value="3" />
                        </el-select>
                        <el-date-picker
                            v-model="timeValue"
                            type="datetimerange"
                            range-separator="To"
                            start-placeholder="Start date"
                            end-placeholder="End date"
                        />
                    </div>
                    <div class="DocumentNumber">
                        <el-input
                            v-model="input"
                            placeholder="Please input"
                            class="input-with-select"
                        >
                            <template #prepend>
                                <el-select
                                    v-model="select"
                                    placeholder="单据编号"
                                    style="width: 6.25rem; background-color: #fff"
                                >
                                    <el-option label="Restaurant" value="1" />
                                    <el-option label="Order No." value="2" />
                                    <el-option label="Tel" value="3" />
                                </el-select>
                            </template>
                            <template #append>
                                <el-button :icon="Search"></el-button>
                            </template>
                        </el-input>
                    </div>
                </div>
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    class="mt20"
                    :header-cell-style="{ background: '#f5f7fa' }"
                    border
                    height="240"
                >
                    <el-table-column label="操作时间" prop="bh" />
                    <el-table-column label="明细类型" prop="dz" :show-overflow-tooltip="true" />
                    <el-table-column label="单据编号" prop="mj" />
                    <el-table-column label="单位" prop="mj" />
                    <el-table-column label="入库量" prop="mj" />
                    <el-table-column label="出库量" prop="mj" />
                    <el-table-column label="操作人" prop="mj" />
                    <el-table-column label="备注" prop="mj" />
                </el-table>
            </div>
        </el-drawer>
        <!-- ****************************** 原材料入库 ****************************** -->
        <el-dialog v-model="InDialogVisible" title="原材料入库" width="30%" align-center>
            <el-form :model="outData" label-position="top" class="df fww jcsb">
                <el-form-item label="入库方式：" style="width: 48%">
                    <el-select v-model="outData.status" placeholder="原材料入库">
                        <el-option label="采购入库" value="0" />
                        <el-option label="调拨入库" value="1" />
                        <el-option label="拆解入库" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="原材料类型：" style="width: 48%">
                    <el-select v-model="outData.rawMaterialType" placeholder="原材料类型：">
                        <el-option label="原材料类型1" value="1" />
                        <el-option label="原材料类型2" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="原材料名称：" style="width: 48%">
                    <el-input v-model="outData.rawMaterialName" placeholder="原材料名称：" />
                </el-form-item>
                <el-form-item label="定价：" style="width: 48%">
                    <el-input v-model="outData.price" placeholder="定价：">
                        <template #prepend>￥</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="入库仓库：" style="width: 48%">
                    <el-select v-model="outData.storeId" placeholder="入库仓库 ：">
                        <el-option
                            v-for="item in WarehouseList"
                            :key="item.warehouseId"
                            :label="item.warehouseName"
                            :value="item.warehouseId"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="仓库区域：" style="width: 48%">
                    <el-input v-model="outData.storageLocation" placeholder="仓库区域：" />
                </el-form-item>
                <el-form-item label="仓库货架：" style="width: 48%">
                    <el-input v-model="outData.storageLocationRacks" placeholder="仓库货架：" />
                </el-form-item>
                <el-form-item label="单位：" style="width: 48%">
                    <el-select v-model="outData.measuringUnit" placeholder="outData">
                        <el-option label="克" value="g" />
                        <el-option label="千克" value="kg" />
                        <el-option label="吨" value="t" />
                        <el-option label="千吨" value="kt" />
                    </el-select>
                </el-form-item>
                <el-form-item label="入库数量：" style="width: 48%">
                    <el-input v-model="outData.num" placeholder="outData" />
                </el-form-item>
                <el-form-item label="备注说明：" style="width: 48%">
                    <el-input v-model="outData.rawMaterialDescription" placeholder="outData" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" plain @click="InDialogVisible = false"
                        >取消</el-button
                    >
                    <el-button type="primary" @click="AddPutIn"> 入库 </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- ****************************** 原材料出库 ****************************** -->
        <el-dialog v-model="StartcenterDialogVisible" title="原材料出库" width="30%" align-center>
            <el-form :model="putInData" label-position="top" class="df fww jcsb">
                <el-form-item label="出库类型：" style="width: 48%">
                    <el-select v-model="putInData.status" placeholder="出库类型：">
                        <el-option label="销售出库" value="0" />
                        <el-option label="调拨出库" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="仓库编号：" style="width: 48%">
                    <el-select v-model="putInData.warehouseId" placeholder="仓库编号：">
                        <el-option
                            v-for="item in WarehouseList"
                            :key="item.warehouseId"
                            :label="item.warehouseName"
                            :value="item.warehouseId"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="原材料类型：" style="width: 48%">
                    <el-select v-model="putInData.productType" placeholder="原材料类型：">
                        <el-option
                            v-for="item in materialTypeList"
                            :key="item.rawMaterialType"
                            :label="item.rawMaterialName"
                            :value="item.rawMaterialType"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="出库数量：" style="width: 48%">
                    <el-input v-model="putInData.num" placeholder="出库数量：" />
                </el-form-item>
                <el-form-item label="单位：" style="width: 48%">
                    <el-select v-model="putInData.measuringUnit" placeholder="单位：">
                        <el-option label="克" value="g" />
                        <el-option label="千克" value="kg" />
                        <el-option label="吨" value="t" />
                        <el-option label="千吨" value="kt" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注说明：" style="width: 48%">
                    <el-input v-model="putInData.remark" placeholder="备注说明：" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" plain @click="StartcenterDialogVisible = false"
                        >取消</el-button
                    >
                    <el-button type="primary" @click="Outbound"> 出库 </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- ****************************** 原材料调拨 ****************************** -->
        <el-dialog v-model="DiaoBoDialogVisible" title="原材料调拨" width="30%" align-center>
            <el-form :model="transferData" label-position="top" class="df fww jcsb">
                <el-form-item label="调出仓库：" style="width: 48%">
                    <el-select v-model="transferData.outWarehouseId" placeholder="请选择调出仓库">
                        <el-option
                            v-for="item in WarehouseList"
                            :key="item.warehouseId"
                            :label="item.warehouseName"
                            :value="item.warehouseId"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="调入仓库：" style="width: 48%">
                    <el-select v-model="transferData.inWarehouseId" placeholder="请选择调入仓库">
                        <el-option
                            v-for="item in WarehouseList"
                            :key="item.warehouseId"
                            :label="item.warehouseName"
                            :value="item.warehouseId"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="调拨商品：" style="width: 48%">
                    <el-select v-model="transferData.contentId" placeholder="请选择调拨商品">
                        <el-option
                            v-for="item in materialTypeList"
                            :key="item.rawMaterialType"
                            :label="item.rawMaterialName"
                            :value="item.rawMaterialType"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="调拨状态：" style="width: 48%">
                    <el-select v-model="transferData.transferStatus" placeholder="请选择调拨状态">
                        <el-option label="0" value="0" />
                        <el-option label="1" value="1" />
                        <el-option label="2" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="调拨数量：" style="width: 48%">
                    <el-input v-model="transferData.num" placeholder="请选择调拨数量" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" plain @click="DiaoBoDialogVisible = false"
                        >取消</el-button
                    >
                    <el-button type="primary" @click="transfer"> 调拨 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
    RequestRawMaterialSave,
    RequestWarehouseList,
    RequestRawMaterialGetMaterialType,
    RequestMaterialStatisticGetlistlimit,
    RequestRawMaterialMaterialOutbound,
    RequestTransferSave,
} from '@/api/path/index.js'
import { User, Search } from '@element-plus/icons-vue'
const searchData = ref<any>({
    storeId: '',
    rawMaterialId: '',
    rawMaterialName: '',
})
const StartcenterDialogVisible = ref<any>(false) //出库
const InDialogVisible = ref<any>(false) //入库
const DiaoBoDialogVisible = ref<any>(false) //调拨
const timeValue = ref<[Date, Date]>([
    new Date(2000, 10, 10, 10, 10),
    new Date(2000, 10, 11, 10, 10),
])
const input = ref('')
const select = ref('')
const tableData = ref<any>([])
const num = ref(2)
/* 查看详情&修改 */
const editformData = ref<any>({})
const multipleSelection = ref<any>([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}
const drawer = ref(false) //详情
const flag = ref<any>(true)
/* ************************ 获取仓库下拉数据 ************************ */
const WarehouseList = ref<any>([])
const getWarehouseList = () => {
    RequestWarehouseList().then((res: any) => {
        WarehouseList.value = res.resultObj
    })
}
/* ************************ 获取原材料下拉数据 ************************ */
const materialTypeList = ref<any>([])
const getMaterialTypeList = () => {
    RequestRawMaterialGetMaterialType().then((res: any) => {
        materialTypeList.value = res.resultObj
    })
}
getMaterialTypeList()
getWarehouseList()
/* ************************ 分页获取数据 ************************ */
const total = ref<any>(20)
const currentPage = ref(1)
const pageSize = ref(10)
const getData = () => {
    RequestMaterialStatisticGetlistlimit({
        page: currentPage.value,
        rows: pageSize.value,
    }).then((res: any) => {
        // console.log(res);
        tableData.value = res.resultObj.data
        total.value = res.resultObj.total
    })
}
/* ************************ 查询 ************************ */
const search = () => {
    console.log('3656', searchData.value)
    // RequestRawMaterialGetlistlimit(searchData.value).then((res: any) => {
    //     tableData.value = res.resultObj.data
    //     total.value = res.resultObj.total
    // })
}
getData()
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    getData()
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    getData()
}
/* ************************ 详情 ************************ */
const details = (row: any) => {
    console.log(row)
    editformData.value = row
    drawer.value = true
}
/* ************************ 修改详情 ************************ */
const editDetails = () => {
    flag.value = false
}
/* ************************ 保存详情 ************************ */
const saveDetails = () => {
    flag.value = true
    RequestRawMaterialSave(editformData.value).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            //其它处理代码
            getData()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
/* ************************ 入库 ************************ */
const outData = ref<any>({
    rawMaterialDescription: '',
    num: '',
    storageLocationRacks: '',
    storageLocation: '',
    price: '',
    rawMaterialName: '',
    rawMaterialType: '',
    status: '',
    storeId: '',
    measuringUnit: '',
})
const AddPutIn = () => {
    // InDialogVisible.value = false
    RequestRawMaterialSave({
        rawMaterialDescription: outData.value.rawMaterialDescription,
        num: outData.value.num,
        storageLocation: outData.value.storageLocation + '/' + outData.value.storageLocationRacks,
        price: outData.value.price,
        rawMaterialName: outData.value.rawMaterialName,
        rawMaterialType: outData.value.rawMaterialType,
        status: outData.value.status,
        storeId: outData.value.storeId,
        measuringUnit: outData.value.measuringUnit,
    }).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            InDialogVisible.value = false
            //其它处理代码
            getData()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
/* ************************ 出库 ************************ */
const putInData = ref<any>({
    status: '',
    warehouseId: '',
    productType: '',
    num: '',
    measuringUnit: '',
    remark: '',
})
const Outbound = () => {
    RequestRawMaterialMaterialOutbound(putInData.value).then((res: any) => {
        // RequestRawMaterialMaterialOutbound({
        //     status: putInData.status,
        //     warehouseId: putInData.warehouseId,
        //     contentId: [putInData.contentId],
        //     num: putInData.num,
        //     measuringUnit: putInData.measuringUnit,
        //     remark: putInData.remark,
        // }).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            StartcenterDialogVisible.value = false
            //其它处理代码
            getData()
        } else {
            ElMessage.error(res.msg)
        }
    })
}

/* ************************ 调拨 ************************ */
const transferData = ref<any>({
    num: '',
    transferStatus: '',
    inWarehouseId: '',
    outWarehouseId: '',
    contentType: 0,
})
const transfer = () => {
    RequestTransferSave(transferData.value).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            DiaoBoDialogVisible.value = false
            getData()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
</script>

<style scoped lang="scss">
.main {
    width: 100%;

    .top {
        width: 100%;
        background-color: #fff;
    }

    .content {
        width: 100%;
        background-color: #fff;
    }
}

.icon_i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -6.875rem;
    right: 0;
    margin: auto 0;
}

.downLoad {
    line-height: 1rem;
    margin-left: 0.625rem;
    color: #116cf8;
}

.el-select {
    width: 100%;
}

.el-input-number {
    width: 100%;
}

.drawer_top {
    width: 100%;
    background-color: #fff;
    border-radius: 0.5rem;
}

/* 弹出框样式 */
::v-deep .el-overlay {
    .el-dialog__header {
        background-color: #116cf8;
        margin-right: 0;
    }

    .el-dialog__title {
        color: #fff;
    }

    // .el-icon svg {
    //     color: #fff;
    // }
}

::v-deep .el-drawer {
    .el-overlay .el-icon svg {
        color: red;
    }

    .el-drawer__header {
        margin-bottom: 0;
    }
}

::v-deep .b0 {
    .el-input__wrapper:nth-child(1) {
        border-radius: 0.25rem 0rem 0rem 0.25rem;
        position: relative;
        left: 0.0625rem;
    }

    .el-input__wrapper:nth-child(2) {
        border-radius: 0rem 0.25rem 0.25rem 0rem;
    }
}

.DocumentNumber {
    .el-button {
        background-color: #fff;
        border: 0.0625rem solid #dcdfe6;
        border-left: none;
    }
}
</style>
